<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

		<title>Voccoexpress &mdash; Login</title>
		<style type="text/css">
			*
			{
				padding: 0;
				margin: 0;
			}
			:focus
			{
				outline: 0;
			}
			img
			{
				border: none;
			}
			body
			{
				font: italic 14px Georgia, 'Nimbus Roman No9 L', norasi, rekha, sans-serif;
				background: #2C3536 url('images/bg.png') repeat-x;
				color: #555;
			}
			h2
			{
				color: #FFF;
				font-size:21px;
				margin: -30px -30px 0 -30px;
				padding: 20px;
				background: #0080E3 url('images/grad.png') repeat-x;
				margin-bottom: 27px;
				font-weight: normal;
			}
			a
			{
				color: #004ba2;
				text-decoration: none;
			}
			a:hover
			{
				color: #555;
			}
			#wrapper
			{
				width: 418px;
				margin: 40px auto;
			}
			#container
			{
				margin-top: 90px;
				background: #FFF;
				padding: 30px;
				width: 418px;
			}
			input
			{
				font: italic 16px Georgia, 'Nimbus Roman No9 L', norasi, rekha, sans-serif;
			}
			input.text
			{
				background: #f5f5f5;
				border: 1px solid #D0D0D0;
				color: #666;
				padding: 12px;
				margin-bottom: 20px;
			}
			.button
			{
				border: 1px solid #AAA;
				padding: 10px;
				background: #DDD;
				font-size: 15px;
				width: 100px;
				float: left;
				color: #666;
			}
			.notice 
			 {  
			    background-color: #fff9d7;  
			    border: 1px solid #e2c822;  
			    color: #555;  
			    padding: 10px;  
				margin-bottom: 20px;
			    font-size: 13px;  
			    font-weight: bold;  
			 }
			 .message
			 {  
			    background-color: #0E3350;  
			    border: 1px solid #2571AB;  
			    color: #EBCD4E;  
			    padding: 10px;  
				margin-bottom: 20px;
			    font-size: 13px;  
			    font-weight: bold;  
			 } 
			 .clearing
			 {
				clear: both;
			 }
			 .img
			 {
				float: right;
			 }
			 .left
			 {
				float: left;
			 }
		</style>
		<script type="text/javascript" src="js/jquery.js">	</script>
	
		<script type="text/javascript" src="js/jquery.reflect.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$('.img').reflect({height: 0.3, opacity: 0.4});
			})
		</script>

	</head>
	<body>
		<div id="wrapper">
			<img src="images/logo.png" alt="Voccoexpress" />
			<div id="container">
			<h2>Swixs &rarr; Dashboard</h2>
			<div class="notice">There has been an error authorizing you</div>
			<div class="left">
			<form action="index.html" method="post">
				<p><input type="text" class="text" name="username" onclick="if(this.value == 'Username') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Username'; }" value="Username" size="30" /></p>
				<p><input type="password" class="text" name="password" value="Password" size="30" /></p>
				<input type="submit" class="button" name="login" value="Login" />
			</form>
			</div>
			<div class="clearing"></div>
			</div>
		</div>
	</body>
</html>